<template>
  <div class="warp">
    <!-- 头部 -->
    <!-- 数据 -->
    <div style="background-color: rgb(240, 242, 245); padding: 10px">
      <a-row :gutter="[16, 16]" :bordered="false">
        <a-col
          :xs="24"
          :sm="24"
          :md="24"
          :lg="24"
          :xl="24"
          :xxl="14"
          :bordered="false"
        >
          <a-card title="数据概况" :bordered="false">
            <!-- <template #extra>
              <a-button type="primary" v-if="isDemo" @click="goAiClues"
                >前往AI线索池</a-button
              ></template
            > -->
            <div
              class="content-warp"
              :style="{
                flexWrap: $store.getters.isMobile ? 'wrap' : undefined,
              }"
            >
              <div class="content">
                <div class="content-header">
                  <div class="icon">
                    <cu-icon type="org-xiansuo-copy-copy" style="color: #fff" />
                  </div>
                  <div class="header-left">
                    <div class="header-title">本日新增线索</div>
                    <div class="header-number">{{ datas.todayAddClue }}</div>
                  </div>
                </div>
                <a-divider />
                <div class="content-footer">
                  <div class="footer-left">周新增</div>
                  <div class="left-text">{{ datas.weekAddClue }}</div>
                  <div class="footer-right">月新增</div>
                  <div class="left-text">{{ datas.monthAddClue }}</div>
                </div>
              </div>
              <div class="content">
                <div class="content-header">
                  <div class="icon">
                    <cu-icon
                      type="org-daichuli-copy-copy"
                      style="color: #fff"
                    />
                  </div>
                  <div class="header-left">
                    <div class="header-title">待处理线索</div>
                    <div class="header-number">{{ datas.clueStatus0 }}</div>
                  </div>
                </div>
                <a-divider />
                <div class="content-footer">
                  <div class="footer-left">潜在客户</div>
                  <div class="left-text">{{ datas.clueStatus10 }}</div>
                  <div class="footer-right">转客户</div>
                  <div class="left-text">{{ datas.clueStatus20 }}</div>
                  <!-- <div class="footer-left">潜在客户</div>
                  <div class="left-text">{{datas.clueStatus10}}</div>
                  <div class="footer-right">转客户</div>
                  <div class="left-text">{{datas.clueStatus20}}</div>-->
                </div>
              </div>
              <div class="content">
                <div class="content-header">
                  <div class="header-left">
                    <div class="header-title">本周线索转化率</div>
                    <div class="header-number">
                      {{ datas.weekClue20Precent }}%
                    </div>
                  </div>
                  <div>
                    <a-progress
                      type="circle"
                      :percent="Number(datas.weekClue20Precent)"
                      :width="60"
                      :showInfo="false"
                    />
                  </div>
                </div>
                <a-divider />
                <div class="content-footer">
                  <div class="footer-left">上周</div>
                  <div class="left-text">{{ datas.clueStatus20 }}</div>
                  <div class="footer-right">历史</div>
                  <div class="left-text">{{ datas.clueStatus20 }}</div>
                </div>
              </div>
            </div>
          </a-card>
        </a-col>
        <!-- 移动设置 -->
        <a-col
          :xs="24"
          :sm="24"
          :md="24"
          :lg="24"
          :xl="24"
          :xxl="10"
          :bordered="false"
        >
          <a-card title="招商平台" :bordered="false">
            <template #extra>
              <a-space>
                <a-button type="primary" ghost @click="setUp">设置</a-button>
                <a-button type="primary" :href="pcUrl" target="_blank"
                  >前往招商平台</a-button
                >
              </a-space>
            </template>
            <div class="mobile">
              <div style="width: 127px; height: 135px; margin: 19px auto">
                <qrcode-vue
                  :value="qrcodeUrl"
                  :size="100"
                  class="code"
                  v-if="qrcodeUrl"
                />
                <img v-if="appletCode" :src="appletCode" style="width: 100%" />
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
  <!-- 头部 -->
  <!-- 线索池 -->
  <a-drawer
    title="自建线索"
    :width="$store.getters.isMobile ? 350 : 450"
    :visible="visible"
    :body-style="{ paddingBottom: '80px' }"
    @close="onClear"
  >
    <a-form
      :model="forms"
      ref="formRef"
      :rules="addRules"
      layout="vertical"
      @finish="onPollSearch"
    >
      <a-col :span="22">
        <a-form-item label="联系人名称" name="contact_name">
          <a-input
            v-model:value="forms.contact_name"
            placeholder="请输入联系人名称"
          />
        </a-form-item>
      </a-col>
      <a-col :span="22">
        <a-form-item label="手机号" name="contact_phone">
          <a-input
            v-model:value="forms.contact_phone"
            placeholder="请输入手机号"
          />
        </a-form-item>
      </a-col>
      <a-col :span="22">
        <a-form-item label="公司" name="company">
          <a-input v-model:value="forms.company" placeholder="请输入所属公司" />
        </a-form-item>
      </a-col>
      <a-col :span="22">
        <a-form-item label="意向楼宇" name="build_id">
          <a-select
            style="width: 100%"
            placeholder="请选择..."
            v-model:value="forms.build_id"
            :options="optionsSelect"
          />
        </a-form-item>
      </a-col>
      <a-col :span="22">
        <a-form-item label="需求面积段">
          <a-input-group size="default">
            <a-row :gutter="8">
              <a-col :span="8">
                <a-input
                  v-model:value="forms.expect_area_min"
                  placeholder="最小值"
                /> </a-col
              >-
              <a-col :span="8">
                <a-input
                  v-model:value="forms.expect_area_max"
                  placeholder="最大值"
                />
              </a-col>
            </a-row>
          </a-input-group>
        </a-form-item>
      </a-col>
      <a-col :span="22">
        <a-form-item label="推广员" name="channel_id">
          <a-select
            v-model:value="forms.channel_id"
            placeholder="请选择"
            :options="chanelList"
          >
            <!-- <a-select-option value="forms.coustoms">d</a-select-option> -->
            <a-select-option
              v-for="temp of templateList"
              :value="temp.id"
              :key="temp.id"
              >{{ temp.template_name }}</a-select-option
            >
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="22">
        <a-form-item label="备注" name="remark">
          <a-textarea
            v-model:value="forms.remark"
            placeholder="请输入备注"
            :rows="4"
          />
        </a-form-item>
      </a-col>

      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
      >
        <a-button style="margin-right: 8px" @click="onClear">取消</a-button>
        <a-button type="primary" html-type="submit">提交</a-button>
      </div>
    </a-form>
  </a-drawer>
  <div class="cluePoll">
    <a-row type="flex" justify="space-between">
      <a-col style="font-size: 20px; margin: 20px 20px 10px 10px">线索池</a-col>
      <a-col
        ><a-button
          class="mobile-btn"
          type="primary"
          @click="showToast"
          v-action="['clueManagement', 'curd', 'add']"
        >
          <PlusOutlined style="font-size: 16px" />线索
        </a-button></a-col
      >
    </a-row>
    <a-row :gutter="[8, 8]" style="padding: 10px">
      <a-col>
        <a-radio-group v-model:value="radioValue" @change="changeStatus">
          <a-radio-button
            v-for="status in statusListRadio"
            :key="status.value"
            :value="status.value"
            >{{ status.label }}</a-radio-button
          >
        </a-radio-group>
      </a-col>
      <a-col>
        <a-range-picker
          @change="onChange"
          v-model:value="valueTimes"
          format="YYYY/MM/DD"
        />
      </a-col>
      <a-col>
        <a-input-search
          v-model:value="menValue"
          placeholder="搜索跟进人"
          style="width: 200px"
          @search="onSearch"
          allowClear
        />
      </a-col>
    </a-row>

    <!-- 线索池 -->
    <a-table
      bordered
      align="center"
      :columns="columns"
      :data-source="data"
      :scroll="{ x: 'max-content' }"
      rowKey="id"
      @change="handleTableChange"
      :pagination="pagination"
      :loading="loading"
    >
      <template
        #customFilterDropdown="{
          setSelectedKeys,
          selectedKeys,
          confirm,
          clearFilters,
          column,
        }"
      >
        <div style="padding: 8px">
          <a-input
            ref="searchInput"
            :placeholder="`搜索 ${column.title}`"
            :value="selectedKeys[0]"
            style="width: 188px; margin-bottom: 8px; display: block"
            @change="
              (e) => setSelectedKeys(e.target.value ? [e.target.value] : [])
            "
            @pressEnter="handleSearch(selectedKeys, confirm, column.key)"
          />
          <a-button
            type="primary"
            size="small"
            style="width: 90px; margin-right: 8px"
            @click="handleSearch(selectedKeys, confirm, column.key)"
          >
            搜索
          </a-button>
          <a-button
            size="small"
            style="width: 90px"
            @click="handleReset(clearFilters, confirm)"
          >
            重置
          </a-button>
        </div>
      </template>
      <template #customFilterIcon="filtered">
        <search-outlined
          :style="{ color: filtered ? '#108ee9' : undefined, fontSize: '14px' }"
        />
      </template>

      <!-- 跟进 -->

      <template #bodyCell="{ text, record, index, column }">
        <template v-if="column.key === 'requiredArea'">
          <span v-if="text?.expect_area_min || text?.expect_area_max"
            >{{ text?.expect_area_min }}-{{ text?.expect_area_max }}m²</span
          >
          <span v-else>--</span>
        </template>
        <template v-if="column.key === 'action'">
          <a-button
            type="link"
            v-action="['clueManagement', 'curd', 'put']"
            @click="showPop(record.id)"
            >跟进</a-button
          >
          <a-button
            type="link"
            v-action="['clueManagement', 'curd', 'delete']"
            @click="OwnerConDelete(record.id)"
            >删除</a-button
          >
        </template>
      </template>
    </a-table>
  </div>
  <a-drawer
    title="线索跟进"
    :width="$store.getters.isMobile ? 350 : 450"
    :visible="pop"
    :body-style="{
      height: 'calc(100% - 95px)',
      boxSizing: 'border-box',
      overflowY: 'auto',
    }"
    @close="onClose"
    :destroyOnClose="true"
  >
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="跟进信息">
        <div class="cards">
          <a-card class="card" title="流转" size="small">
            <a-form
              :model="fllowForm"
              :rules="rules"
              ref="formRef"
              layout="vertical"
            >
              <a-col :span="22">
                <a-form-item label="变更客户状态" name="status">
                  <a-select
                    v-model:value="fllowForm.status"
                    placeholder="请选择"
                    :options="statusList"
                    @change="handleChange"
                  ></a-select>
                </a-form-item>
              </a-col>

              <a-col :span="22" v-if="statusChange">
                <a-form-item label="跟进记录">
                  <a-textarea
                    v-model:value="fllowForm.status_content"
                    :rows="4"
                  />
                </a-form-item>
              </a-col>
            </a-form>
          </a-card>
        </div>
        <div class="cards">
          <a-card class="card" size="small">
            <template v-slot:title>
              <div>
                下次跟进时间
                <a-tooltip placement="right">
                  <template #title>
                    <span
                      >设置下次跟进时间，任务应用届时将通过公众号及站内信进行提醒推送</span
                    >
                  </template>
                  <QuestionCircleOutlined :style="{ fontSize: '14px' }" />
                </a-tooltip>
              </div>
            </template>
            <a-form :model="fllowForm" :rules="rules" layout="vertical">
              <a-col :span="22">
                <a-form-item name="next_time">
                  <a-date-picker
                    :show-time="{ format: 'HH:mm' }"
                    placeholder="选择时间"
                    format="YYYY-MM-DD HH:mm"
                    style="width: 100%"
                    v-model:value="fllowForm.next_time"
                  />
                </a-form-item>
              </a-col>
            </a-form>
          </a-card>
        </div>
        <div class="cards" v-if="statusChange">
          <a-card title="变更跟进人" style="height: 180px !important">
            <a-form :model="form" :rules="rules">
              <div class="bbbb">
                <a-col>
                  <a-form-item label="跟进人">
                    <a-select
                      v-model:value="fllowForm.operation_uid"
                      :options="reamarksList"
                      placeholder="请选择跟进人"
                      @change="handleOperation"
                    ></a-select>
                  </a-form-item>
                </a-col>
              </div>
            </a-form>
          </a-card>
        </div>
        <a-card title="跟进记录" style="height: auto">
          <div v-if="reamarksListTimeline.length || reamarksListLast.length">
            <a-timeline>
              <a-timeline-item
                color="blue"
                v-for="(reamarks, index) in reamarksListTimeline"
                :key="index"
              >
                <div class="reative">
                  <div class="absolute t-0 r-0" v-if="reamarks.next_time">
                    <a-switch
                      :checked="reamarks.state"
                      @change="
                        (checked) => reamarkStateChange(reamarks, checked)
                      "
                      :checkedValue="1"
                      :unCheckedValue="0"
                      :disabled="reamarks.state == 1"
                    />
                    <p class="mt-5">
                      {{ reamarks.state == 1 ? "已完成" : "未完成" }}
                    </p>
                  </div>
                  <div class="time">
                    <span
                      >{{ reamarks.operation_name }} &nbsp;{{
                        reamarks.updated_at
                      }}</span
                    >
                  </div>
                  <div class="text" v-if="reamarks.status">
                    最新状态： {{ reamarks.status }}
                  </div>
                  <div
                    class="text"
                    v-if="
                      reamarks.operation_name !== reamarks.new_operation_name &&
                      reamarks.new_operation_name
                    "
                  >
                    变更跟进人：{{ reamarks.new_operation_name }}
                  </div>
                  <div class="text" v-if="reamarks.next_time">
                    下次跟进时间：{{ reamarks.next_time }}
                  </div>
                  <div class="time">
                    <span style="color: #8d8d8d">{{ reamarks.content }}</span>
                  </div>
                </div>
              </a-timeline-item>
              <template #pending>
                <div v-for="last in reamarksListLast" :key="last.id">
                  <div class="relative">
                    <div class="absolute t-0 r-0" v-if="last.next_time">
                      <a-switch
                        :checked="last.state"
                        @change="(checked) => reamarkStateChange(last, checked)"
                        :checkedValue="1"
                        :unCheckedValue="0"
                        :disabled="last.state == 1"
                      />
                      <p class="mt-5">
                        {{ last.state == 1 ? "已完成" : "未完成" }}
                      </p>
                    </div>
                    <div class="time">
                      <span
                        >{{ last.operation_name }} &nbsp;{{
                          last.updated_at
                        }}</span
                      >
                    </div>
                    <div class="text" v-if="last.status">
                      最新状态： {{ last.status }}
                    </div>
                    <div
                      class="text"
                      v-if="
                        last.operation_name !== last.new_operation_name &&
                        last.new_operation_name
                      "
                    >
                      变更跟进人：{{ last.new_operation_name }}
                    </div>
                    <div class="text" v-if="last.next_time">
                      下次跟进时间：{{ last.next_time }}
                    </div>
                    <div class="time">
                      <span style="color: #8d8d8d">{{ last.content }}</span>
                    </div>
                  </div>
                  <!-- <span>自建线索</span>
                <div></div> -->
                </div>
              </template>
              <template #pendingDot>
                <div
                  style="
                    width: 10px;
                    height: 10px;
                    background: #1890ff;
                    border-radius: 10px;
                  "
                ></div>
              </template>
              <!-- <a-timeline-item>
              <div class="text">自建线索</div>
              <div class="time">
                <span></span>
              </div>
              <div class="time">
                <span></span>
              </div>
            </a-timeline-item> -->
            </a-timeline>
          </div>

          <a-empty v-else />
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="2" tab="基本信息" force-render>
        <a-form
          :model="formsPut"
          ref="formRef"
          :rules="addRules"
          layout="vertical"
        >
          <a-col :span="22">
            <a-form-item label="联系人名称" name="contact_name">
              <a-input
                v-model:value="formsPut.contact_name"
                placeholder="请输入联系人名称"
              />
            </a-form-item>
          </a-col>
          <a-col :span="22">
            <a-form-item label="手机号" name="contact_phone">
              <a-input
                v-model:value="formsPut.contact_phone"
                placeholder="请输入手机号"
              />
            </a-form-item>
          </a-col>
          <a-col :span="22">
            <a-form-item label="公司">
              <a-input
                v-model:value="formsPut.company"
                placeholder="请输入所属公司"
              />
            </a-form-item>
          </a-col>
          <a-col :span="22">
            <a-form-item label="意向楼宇">
              <a-select
                style="width: 100%"
                placeholder="请选择..."
                v-model:value="formsPut.build_id"
                :options="optionsSelect"
              />
            </a-form-item>
          </a-col>
          <a-col :span="22">
            <a-form-item label="需求面积段">
              <a-input-group size="default">
                <a-row :gutter="8">
                  <a-col :span="8">
                    <a-input
                      v-model:value="formsPut.expect_area_min"
                      placeholder="最小值"
                    /> </a-col
                  >-
                  <a-col :span="8">
                    <a-input
                      v-model:value="formsPut.expect_area_max"
                      placeholder="最大值"
                    />
                  </a-col>
                </a-row>
              </a-input-group>
            </a-form-item>
          </a-col>
          <a-col :span="22">
            <a-form-item label="推广员">
              <a-select
                v-model:value="formsPut.channel_id"
                placeholder="请选择"
                :options="chanelList"
              >
                <!-- <a-select-option value="forms.coustoms">d</a-select-option> -->
                <a-select-option
                  v-for="temp of templateList"
                  :value="temp.id"
                  :key="temp.id"
                  >{{ temp.template_name }}</a-select-option
                >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="22">
            <a-form-item label="备注">
              <a-textarea
                v-model:value="formsPut.remark"
                placeholder="请输入备注"
                :rows="4"
              />
            </a-form-item>
          </a-col>
        </a-form>
      </a-tab-pane>
    </a-tabs>
    <div
      :style="{
        position: 'absolute',
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e8e8e8',
        padding: '10px 16px',
        textAlign: 'right',
        left: 0,
        background: '#fff',
        borderRadius: '0 0 4px 4px',
      }"
    >
      <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
      <a-button type="primary" @click="submnitClick">确定</a-button>
    </div>
  </a-drawer>

  <!-- 移动端设置 -->
  <SetDrawer
    :visible="setDrawerVisible"
    @clear="claerBtn"
    @submit="submnitBtn"
  />
</template>
<script>
import { defineComponent, reactive, ref, computed, toRaw } from "vue";
import request from "../../../common/utils/request";
import moment from "moment";
import store from "../../../store";
import QrcodeVue from "qrcode.vue";
import { message, Modal } from "ant-design-vue";
import {
  PlusOutlined,
  SearchOutlined,
  QuestionCircleOutlined,
} from "@ant-design/icons-vue";
import SetDrawer from "./moudles/setDrawer.vue";
import { useRoute, useRouter } from "vue-router";

export default defineComponent({
  components: {
    PlusOutlined,
    SearchOutlined,
    QrcodeVue,
    SetDrawer,
    QuestionCircleOutlined,
  },
  setup() {
    //   路由
    const route = useRoute();
    const router = useRouter();

    const operation_uid = ref("");
    const activeKey = ref("1");
    const datas = ref({});
    const clientValue = ref("");
    const showFollow = ref(true);
    const showBasic = ref(false);
    const toast = ref(false);
    const pop = ref(false);
    const value10 = ref("");
    const value = ref("");
    const values = ref("");
    const page = ref(1);
    const limit = ref(10);
    const total = ref(0);
    const id = ref("");
    const result = ref;
    const visible = ref(false);
    const codeList = ref({});
    const templateList = ref([]);
    const statusList = ref([]);
    const statusListRadio = ref([]);
    const radioValue = ref("1");
    const chanelList = ref([]);
    const statusLists = ref([]);
    const ListValue = ref("");
    const value19 = ref("");
    const textValue = ref("11111");

    // 移动端设置
    const setDrawerVisible = ref(false);

    const onOk = (value, dateString) => {
      console.log(value, dateString);
    };
    // 日期
    const onChange = (value, dateString) => {
      page.value = 1;
      HouseholdList(undefined, dateString[0], dateString[1]);
    };
    // 跟进信息下拉框

    const getTemplate = () => {
      return new Promise((resolve, reject) => {
        request
          .get("/org", "/business/clue/status/list", { is_filter: 1 })
          .then((res) => {
            statusListRadio.value = res.list.map((item) => ({
              value: item.value,
              label: item.name,
            }));
            statusListRadio.value.unshift({
              label: "全部状态",
              value: "1",
            });
            if (route.query.toBeProcessed == 1) {
              let _list = statusListRadio.value.filter(
                (v) => v.label === "待处理"
              );
              if (_list?.length) {
                radioValue.value = _list[0].value;
              }
            }
            resolve(res);
          })
          .catch((err) => {
            reject(err);
          });
      });
    };
    const statusData = () => {
      request.get("/org", "/business/clue/status/list").then((res) => {
        statusList.value = res.list.map((item) => ({
          value: item.value,
          label: item.name,
        }));
      });
    };
    // 推广员
    const getChanel = () => {
      request
        .get("/org", "/business/customer/channel", {
          page: 1,
          pageSize: 1000,
        })
        .then((res) => {
          chanelList.value = res.list.map((item) => ({
            value: item.id,
            label: item.name,
          }));
        });
    };
    // 招商开关
    let checkedbool = "";
    const selectChecked = (checked) => {
      console.log("改变了", checked);
      checkedbool = checked;
      console.log(checkedbool, "wwwedwsqdcs");
    };

    // 招商输入框
    let inputVal = "";
    const txeraInput = (notesValue) => {
      inputVal = notesValue.srcElement.value;
    };
    const statusChange = ref(true);
    const handleChange = (val, text) => {
      value.value = val;
      if (text.label == "转客户") {
        statusChange.value = false;
        fllowForm.operation_uid = "";
        fllowForm.status_content = "";
        operation_name.value = "";
        return;
      }
      statusChange.value = true;
    };
    // 客户状态
    const changeStatus = (value) => {
      page.value = 1;
      if (value.target.value == "1") {
        HouseholdList(undefined);
        return;
      }
      HouseholdList(value.target.value);
    };
    // 分页
    const pagination = computed(() => ({
      total: total.value,
      current: page.value,
      pageSize: limit.value,
      showSizeChanger: true,
    }));
    const handleTableChange = (pager, filters, sorter) => {
      page.value = pager.current;
      limit.value = pager.pageSize;
      HouseholdList();
    };
    // 新建线索表单
    const form = reactive({
      contact_name: "",
      contact_phone: "",
      company: "",
      building: "",
      expect_area_min: "",
      expect_area_max: "",
      area: "",
      coustoms: "",
      remark: "",
    });
    const params = reactive({
      house_resource: [],
    });
    const forms = reactive({
      contact_name: "",
      contact_phone: "",
      company: "",
      building: "",
      expect_area_min: "",
      expect_area_max: "",
      area: "",
      coustoms: "",
      remark: "",
    });
    const formsPut = reactive({
      contact_name: "",
      contact_phone: "",
      company: "",
      building: "",
      expect_area_min: "",
      expect_area_max: "",
      area: "",
      channel_id: "",
      remark: "",
    });
    const formRef = ref();
    const fllowForm = reactive({
      status: "",
      values: "",
      operation_uid: undefined,
      next_time: "",
    });
    const addRules = {
      contact_phone: [
        {
          required: true,
          message: "请输入手机号",
        },
      ],
      contact_name: [
        {
          required: true,
          message: "请输入联系人名称",
        },
      ],
    };
    const rules = {
      name: [
        {
          required: true,
          message: "请输入联系人名称",
        },
      ],
      phone: [
        {
          required: true,
          message: "请输入手机号",
        },
      ],
      company: [
        {
          required: true,
          message: "请输入所属公司",
        },
      ],
      building: [
        {
          required: true,
          message: "请输入意向楼宇",
        },
      ],
      status: [
        {
          required: true,
          message: "请选择变更状态",
        },
      ],
      record: [
        {
          required: true,
        },
      ],
    };
    // 关闭移动设置
    const claerBtn = () => {
      setDrawerVisible.value = false;
    };
    // 确定Click
    const submnitBtn = () => {
      setDrawerVisible.value = false;
    };

    const showToast = () => {
      visible.value = true;
      contentList();
    };
    const builds_name = ref([]);

    const onClose = () => {
      formRef.value.resetFields();
      visible.value = false;
      pop.value = false;
      fllowForm.status = "";
      fllowForm.values = "";
      fllowForm.operation_uid = undefined;
      state.list = [];
      fllowForm.status_content = "";
      fllowForm.next_time = "";
    };
    // 招商提交
    const onSubmit = () => {
      params.openPromoter = checkedbool;
      params.promoterSlogan = inputVal;
      request
        .put("org", "/business/customer/config", { params })
        .then((res) => {
          message.success(res.msg || "提交成功");
          HouseholdList();
        });
    };
    //筛选
    const contactName = ref("");
    const contactPhone = ref("");
    const phoneList = ref("");
    const valueSearch = ref("");
    const valuePhone = ref("");
    const valueTimes = ref("");
    const menList = ref("");
    const menValue = ref("");
    const operationUid = ref("");
    const qrcodeUrl = ref("");
    const appletCode = ref("");
    const pcUrl = ref("");
    // 线索池姓名搜索
    const loading = ref(false);
    const searchForm = reactive({});

    const handleSearch = (selectedKeys, confirm, searchKey) => {
      if (selectedKeys && selectedKeys.length > 0) {
        searchForm[searchKey] = selectedKeys[0];
      }
      page.value = 1;
      confirm();
    };

    // 线索池手机号筛选
    const phoneSearch = (selectedKeys, confirm, dataIndex) => {
      phoneList.value = valuePhone.value;
      console.log(valuePhone);
      request
        .get("/org", "/business/clue", {
          page: page.value,
          pageSize: limit.value,
          contactPhone: valuePhone.value == "" ? undefined : valuePhone.value,
          managerAuth: managerAuth.value,
        })
        .then((res) => {
          console.log("搜索手机号", res);
          data.value = res.list;
          total.value = res.total;
          confirm();
          valuePhone.value = "";
        });
    };
    // 处理人搜索
    const onSearch = (value) => {
      page.value = 1;
      loading.value = true;
      request
        .get("/org", "/business/clue", {
          page: page.value,
          pageSize: limit.value,
          operationUid: value || undefined,
          managerAuth: managerAuth.value,
        })
        .then((res) => {
          data.value = res.list;
          total.value = res.total;
          loading.value = false;
        });
    };

    // 意向楼宇
    const optionsSelect = ref([]);
    const state = reactive({
      list: [],
      itemList: [],
    });
    const contentList = () => {
      request
        .get("/org", "/build/villageAndBuildList", { checked: 1 })
        .then((res) => {
          res.villageList.map((item) => {
            state.list = state.list.concat(item.buildList);
          });
          state.itemList = state.list.map((item) => {
            return {
              label: item.build_name,
              value: item.id,
            };
          });
          optionsSelect.value = state.itemList;
        });
    };
    const onClear = () => {
      visible.value = false;
      forms.expect_area_max = "";
      forms.expect_area_min = "";
      formRef.value.resetFields();
      state.list = [];
    };
    // 新建线索
    const onPollSearch = () => {
      request.post("/org", "/business/clue", forms).then((res) => {
        console.log(res);
        message.success(res.msg || "新建成功");
        visible.value = false;
        HouseholdList();
        formRef.value.resetFields();
        forms.expect_area_max = "";
        forms.expect_area_min = "";
        state.list = [];
      });
    };

    // 线索池表格列表数据
    const managerAuth = ref();
    store.getters.menuList.forEach((item) => {
      if (item.alias == "clueManagement") {
        if (item.action.auth.includes("manager")) {
          managerAuth.value = 1;
        } else {
          managerAuth.value = 0;
        }
      }
    });
    const HouseholdList = (status, startDate, endDate) => {
      loading.value = true;
      let params = {
        page: page.value,
        pageSize: limit.value,
        startDate: valueTimes.value == "" ? undefined : valueTimes.value,
        endDate: valueTimes.value == "" ? undefined : valueTimes.value,
        managerAuth: managerAuth.value,
      };
      if (searchForm.contactName) {
        params.contactName = searchForm.contactName;
      }
      if (searchForm.contactPhone) {
        params.contactPhone = searchForm.contactPhone;
      }
      if (status) {
        params.status = status;
      }
      if (startDate) {
        params.startDate = startDate;
      }
      if (endDate) {
        params.endDate = endDate;
      }
      request
        .get("/org", "/business/clue", {
          ...params,
        })
        .then((res) => {
          pcUrl.value = res.pcUrl;
          datas.value = res.countData;
          loading.value = false;
          codeList.value = res.list;
          (data.value = res.list), (total.value = res.total);
          let result = [];
          if (res.list) {
            result = res.list.map((item) => ({
              id: item.id,
            }));
          }
          if (res.qrcodeUrl) {
            //二维码和太阳码
            request
              .get("/third", "/transform/url/wxapp", { url: res.qrcodeUrl })
              .then((res) => {
                if (res.type == "url") {
                  qrcodeUrl.value = res.url;
                  return;
                }
                if (res.type == "image") {
                  appletCode.value = res.url;
                }
              });
          }
        });
    };
    // 提交跟进表单
    const submnitClick = () => {
      formRef.value.validateFields().then((res) => {
        let params = {};
        formsPut.status_content = fllowForm.status_content;
        formsPut.status = fllowForm.status;
        formsPut.operation_uid = fllowForm.operation_uid || "";
        formsPut.operation_name = operation_name.value || "";
        formsPut.next_time = fllowForm.next_time
          ? fllowForm.next_time.format("YYYY-MM-DD HH:mm")
          : "";
        params = formsPut;
        request.put("/org", "/business/clue", params).then((res) => {
          console.log(res);
          message.success(res.msg || "更新成功");
          HouseholdList();
          pop.value = false;
          state.list = [];
          fllowForm.status_content = "";
          fllowForm.next_time = "";
        });
      });
    };
    // let ids = 0;
    // let name = "";
    // let phone = "";
    const handleReset = (clearFilters, confirm) => {
      clearFilters();
      page.value = 1;
      confirm();
    };
    // 跟进
    const reamarksListTimeline = ref([]);
    const reamarksListLast = ref([]);
    let detail = {};
    const showPop = (id) => {
      contentList();
      statusData();
      statusChange.value = true;
      pop.value = true;
      activeKey.value = "1";
      request
        .get("/org", "/business/clue/detail", {
          id,
        })
        .then((res) => {
          detail = res.detail;
          fllowForm.status = Number(detail.status);
          fllowForm.remarkList = detail.remarkList;
          setModelRef(detail);
          fllowForm.operation_uid = detail.operation_uid;
          reamarksList.value.forEach((item) => {
            if (item.value == Number(detail.operation_uid)) {
              operation_name.value = item.label;
            }
          });
          reamarksListTimeline.value = detail.remarkList.slice(0, -1);
          reamarksListLast.value = detail.remarkList.slice(-1);
        });
    };
    const setModelRef = (state) => {
      for (let key in state) {
        formsPut[key] = state[key];
      }
    };
    const reamarksList = ref([]);
    const getReamark = () => {
      request.get("org", "/user/getAdminList").then((res) => {
        console.log(res);
        reamarksList.value = res.list.map((item) => {
          return {
            value: item.uid,
            label: item.realname,
          };
        });
      });
    };
    const operation_name = ref("");
    const handleOperation = (value, change) => {
      operation_name.value = change.label;
    };
    // 确定跟进信息
    let type = 1;
    const text = ref("");
    let time = ref("");
    let remark = ref("");
    let operation = ref("");
    let status = ref("");
    const submitInfomation = () => {
      request.put("/org", "/business/clue", forms).then((res) => {
        console.log(res);
        visible.value = false;
        HouseholdList();
      });
    };

    // 线索池列表删除
    const Modals = ref(false);
    const OwnerConDelete = (id) => {
      console.log(id);
      Modals.value = true;
      Modal.confirm({
        title: "确认删除该联系人么",
        cancelText: "取消",
        onOk() {
          request
            .del("/org", "/business/clue", {
              id,
            })
            .then((res) => {
              message.success(res.msg || "删除成功");
              page.value = data.value.length == 1 ? page.value - 1 : page.value;
              HouseholdList();
            });
        },
      });
    };

    // AI线索
    const goAiClues = () => {
      router.push({
        name: "AiClues",
      });
    };

    const reamarkStateChange = (reamark, checked) => {
      reamark.state = checked;

      request
        .put("/org", "/business/clue/remark", {
          id: reamark.id,
          state: checked,
        })
        .then((res) => {});
    };

    // 招商页面设置
    const setUp = () => {
      router.push({ name: "InvestmentDecoration" });
    };

    const isDemo = computed(() => {
      return store.getters.basicConfig.system_is_demo;
    });

    const init = () => {
      getTemplate().then(() => {
        HouseholdList();
        getReamark();
        getChanel();
      });
    };
    init();
    return {
      setDrawerVisible,
      value19,
      builds_name,
      params,
      activeKey,
      form,
      fllowForm,
      forms,
      reamarksListTimeline,
      reamarksListLast,
      formRef,
      // ...toRefs(state),
      rules,
      addRules,
      visible,
      claerBtn,
      submnitBtn,
      pop,
      showPop,
      showToast,
      onClose,
      onSubmit,
      columns,
      data,
      onPollSearch,
      onClear,
      HouseholdList,
      values,
      pagination,
      handleTableChange,
      value10,
      valueSearch,
      handleSearch,
      phoneSearch,
      showFollow,
      showBasic,
      valuePhone,
      contactName,
      datas,
      submitInfomation,
      OwnerConDelete,
      templateList,
      handleChange,
      statusChange,
      statusList,
      chanelList,
      text,
      getChanel,
      value,
      formsPut,
      time,
      remark,
      handleOperation,
      operation,
      status,
      onOk,
      submnitClick,
      onChange,
      onSearch,
      menValue,
      changeStatus,
      ListValue,
      reamarksList,
      valueTimes: ref([]),
      textValue,
      selectChecked,
      txeraInput,
      qrcodeUrl,
      appletCode,
      managerAuth,
      handleReset,
      statusListRadio,
      radioValue,
      optionsSelect,
      loading,
      ranges: {
        Today: [moment(), moment()],
        "This Month": [moment(), moment().endOf("month")],
      },
      pcUrl,
      goAiClues,
      isDemo,
      setUp,
      reamarkStateChange,
    };
  },
});
const columns = computed(() => {
  return [
    {
      title: "联系人名称",
      dataIndex: "contact_name",
      key: "contactName",
      customFilterDropdown: true,
    },
    {
      title: "手机",
      dataIndex: "contact_phone",
      key: "contactPhone",
      customFilterDropdown: true,
    },
    {
      title: "公司",
      dataIndex: "company",
      key: "company",
    },
    {
      title: "客户状态",
      dataIndex: "status_txt",
      key: "status_txt",
      width: 150,
    },
    {
      title: "线索来源",
      dataIndex: "clue_from_txt",
    },
    {
      title: "更新时间",
      dataIndex: "created_at",
      key: "created_at",
      width: 200,
    },
    {
      title: "跟进人",
      dataIndex: "operation_name",
      key: "operation_name",
    },
    {
      title: "意向项目",
      dataIndex: "build_name",
      key: "build_name",
    },
    {
      title: "需求面积段",
      dataIndex: "requiredArea",
      key: "requiredArea",
    },
    {
      title: "备注",
      dataIndex: "remark",
      key: "remark",
    },
    {
      title: "操作",
      fixed: store.getters.isMobile ? undefined : "right",
      dataIndex: "id",
      key: "action",
      width: 180,
    },
  ];
});
const data = ref([]);
</script>
<style lang="less" scoped>
.demo-dropdown-wrap {
  margin-left: -140px !important;
}

.ant-card-body,
.ant-card-head-title {
  font-family: ".萍方-简 细体", ".萍方-简 中黑体", ".萍方-简", sans-serif;
  color: rgba(0, 0, 0, 0.647058823529412);
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
}
</style>

<style lang="less" scoped>
.cards {
  margin-bottom: 10px;
}
.text,
.time,
.record {
  font-family: ".萍方-简 细体", ".萍方-简 中黑体", ".萍方-简", sans-serif;
  font-weight: 300;
  font-style: normal;
  color: rgba(0, 0, 0.647);
  line-height: 22px;
}
.text,
.class {
  font-size: 14px;
}
// .ant-card {
//   height: 260px;
// }
.record {
  font-size: 10px;
}
.cluePoll-header {
  display: flex;
  button {
    margin-left: 1370px;
    margin-top: 25px;
  }
}
.ant-table-column-sorter {
  font-size: 50px;
}

.ant-card-body {
  box-shadow: rgba(234, 227, 227, 0.35) 4px 4px 4px;
}

.card-warp {
  display: block;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.content-warp {
  display: flex;
  align-content: center;
  justify-content: space-around;
  // flex-wrap: wrap;

  .content {
    width: 100%;
    height: 150px;
    border: 1px solid #f0f0f0;
    box-shadow: 3px 3px 4px #f0f0f0;
    margin: 0 5px;
    margin-bottom: 24px;
  }
}
.content-header {
  width: 180px;
  height: 75px;
  // border-bottom: 1px solid #f0f0f0;
  display: flex;
  margin-left: 32px;
  margin-top: 30px;

  .header-left {
    width: 120px;
    height: 100px;

    .header-title {
      font-size: 14px;
      margin-left: 18px;
      font-family: "PingFang SC Medium", "PingFang SC", sans-serif;
      color: rgba(0, 0, 0, 0.427450980392157);
    }
    .header-number {
      margin-left: 18px;
      font-size: 20px;
      font-weight: 500;
      padding-top: 5px;
      font-family: "Arial Normal", "Arial", sans-serif;
      color: rgba(0, 0, 0, 0.847058823529412);
    }
  }
}
.content-footer {
  display: flex;
  line-height: 35px;
  justify-content: center;
  .footer-left {
    font-family: "Microsoft Tai Le Bold", "Microsoft Tai Le Regular",
      "Microsoft Tai Le", sans-serif;
    color: rgba(0, 0, 0, 0.427450980392157);
    font-size: 12px;
    margin-left: -5px;
  }
  .footer-right {
    margin-left: 35px;
    font-family: "Microsoft YaHei ", "Microsoft YaHei", sans-serif;
    color: rgba(0, 0, 0, 0.427450980392157);
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    width: 36px;
  }
  .card {
    height: 30px;
  }
  .left-text {
    font-size: 12px;
    margin-left: 10px;
    font-weight: 400;
    font-family: "Microsoft Tai Le Bold", "Microsoft Tai Le Regular",
      "Microsoft Tai Le", sans-serif;
    color: rgba(0, 0, 0, 0.747058823529412);
  }
}
.anticon {
  font-size: 30px;
}
.icon {
  border-radius: 30px;
  width: 60px;
  height: 60px;
  background-color: #2681f3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cluePoll {
  background-color: #ffffff;
  // width: 1557px;
  // height: 587px;
  // z-index: 999999999;
  // margin-left: 20px;
  margin: 0 10px;
  p {
    font-family: ".萍方-简 细体", ".萍方-简 中黑体", ".萍方-简", sans-serif;
    font-weight: 300;
    font-size: 20px;
    margin-left: 18px;
    padding-top: 15px;
  }
  .cluePol-search {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
    width: 980px;
    height: 52px;

    margin-left: 18px;
  }
}
.components-input-demo-size {
  width: 200px;
  margin: 0 8px 8px 0;
}
.mobile-title {
  .ant-btn {
    margin-left: 428px;
  }
}
.table-btn {
  display: flex;
  .ant-btn {
    width: 25px;
    text-align: center;
  }
}
.mobile-btn {
  margin: 20px 10px 10px 20px;
}

:deep(.ant-select .ant-select-selector) {
  width: 100% !important;
}
:deep(.bbbb .ant-row.ant-form-item) {
  display: block;
}
:deep(.ant-card-head) {
  padding: 0 10px !important;
}
:deep(.ant-card-head-title) {
  padding: 20px 0;
}
:deep(.ant-divider-horizontal) {
  margin: 0;
}

.reative {
  position: relative;
}

.absolute {
  position: absolute;
}

.t-0 {
  top: 0;
}

.r-0 {
  right: 0;
}
</style>
